<app-widget-panel [hasFooter]='false'>
    <form nz-form [formGroup]="validateForm" class="form-container">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>用户名</nz-form-label>
                    <nz-form-control>
                        <input nz-input formControlName="user" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>所在服务器</nz-form-label>
                    <nz-form-control>
                        <input nz-input formControlName="address" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-space>
                    <button *nzSpaceItem nz-button nzType="primary">查询</button>

                    <button *nzSpaceItem nz-button nz-dropdown [nzDropdownMenu]="dropdownBtn">
                        操作
                        <i nz-icon nzType="down"></i>
                    </button>
                    <nz-dropdown-menu #dropdownBtn="nzDropdownMenu">
                        <ul nz-menu>
                            <li nz-menu-item>
                                <a (click)="upload()">文件上传</a>
                            </li>
                            <li nz-menu-item>
                                <a (click)="download()">模板下载</a>
                            </li>
                            <li nz-menu-item>
                                <a (click)="showDialog()">普通弹窗</a>
                            </li>
                        </ul>
                    </nz-dropdown-menu>
                </nz-space>
            </div>
        </div>
    </form>

    <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false">
        <thead>
            <tr>
                <th nzWidth="50px"></th>
                <th>用户名</th>
                <th>所在服务器</th>
                <th>种族</th>
                <th>职业</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of basicTable.data">
                <td>
                    <a (click)="showPDF()">
                        <i nz-icon nzType="file-pdf" nzTheme="twotone"></i>
                    </a>
                </td>
                <td>{{ data.username }}</td>
                <td>{{ data.address }}</td>
                <td>{{ data.race }}</td>
                <td>{{ data.profession }}</td>
            </tr>
        </tbody>
    </nz-table>


    <nz-modal [(nzVisible)]="isVisible" nzTitle="普通弹窗" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
        <p>Content one</p>
        <p>Content two</p>
        <p>Content three</p>
        <p>Content three</p>
    </nz-modal>
</app-widget-panel>